<template>
  <FIModel title="设置目录" width="600" v-model="showModel" @close="closeClick" @confirm="saveFunc">
    <el-form ref="ruleFormRef " :model="ruleForm" :rules="rules" label-width="100px" :size="formSize">
      <el-form-item label="所属目录" prop="key">
        <el-input v-model="ruleForm.name" placeholder="请选择目录编码" clearable>
          <template #append>
            <el-popover placement="bottom" :width="310" trigger="click">
              <template #reference>
                <i class="font_family icon-xialacaidan"></i>
              </template>
              <CategoryTree @node-click="handleNodeClick"></CategoryTree>
            </el-popover>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
  </FIModel>
</template>
<script setup lang="ts">
import FIModel from '@/components/FIModel.vue'
import { onMounted, reactive, ref, watch } from 'vue'
import CategoryTree from './CategoryTree.vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { apiRequestPost } from '@/api/globalApi.js'
const props = defineProps({
  type: {
    type: String,
    default: '',
  },
  visible: {
    type: Boolean,
    default: false,
  },
  info: {
    type: Object,
    default: () => ({}),
  },
})
const emits = defineEmits(['close', 'update:visible', 'confirm', 'save-ok'])
const showModel = ref(props.visible)
const selectCategoryData = ref('')
watch(
  () => props.visible,
  (val) => {
    if (showModel.value !== val) {
      showModel.value = val
    }
  }
)

watch(
  () => showModel.value,
  (val) => {
    if (props.type !== 'insert') {
      ruleForm.key = props.info.key
      ruleForm.name = props.info.name
      ruleForm.id = props.info.id
    } else {
      ruleForm.key = ''
      ruleForm.name = ''
      ruleForm.id = ''
    }
    // 只有值改变时才触发更新，避免无限循环
    if (val !== props.visible) {
      emits('update:visible', val)
    }
  }
)
interface RuleForm {
  key: string
  name: string
  id: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  key: '',
  name: '',
  id: '',
})
const rules = reactive<FormRules<RuleForm>>({
  key: [{ required: true, message: '请选择所属目录', trigger: 'blur' }],
})
const handleNodeClick = (data) => {
  console.log('00000000000---', data)
  selectCategoryData.value = data
  ruleForm.name = data.name
}
const closeClick = () => {
  emits('update:visible', false)
  emits('close')
}
const saveFunc = () => {
  emits('update:visible', false)
  emits('confirm', selectCategoryData.value.id)
  //   const obj = {
  //     key: ruleForm.key,
  //     id: props.info.id,
  //   }

  //   apiRequestPost('/bpm-service/BpmProcessDef/updateCategory', obj)
  //     .then((res) => {
  //       if (res.data.success) {
  //         emits('save-ok', res.data)
  //         // infoFormType.value = 'info'
  //         // loadNode()
  //         // loadNode(selectedNodeObj.value)
  //       } else {
  //       }
  //     })
  //     .catch((error: any) => {
  //       // 处理错误
  //     })
}
onMounted(() => {
  console.log('-------rops.info----', props.info)
})
</script>
